<!DOCTYPE html>
<html>
  <head>
    <title>信息维护</title>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
		var nowRow;
		$(document).ready(function(){
			$("table tr td input[value='修改']").click(function(){ 
				nowBtn = $(this);
				editUser($(this));
			});
			$("table tr td input[value='保存']").click(function(){ 
				saveUser();
			});
		});
		
		function editUser(btn){
			$("form input[type=reset]").trigger("click");
			nowRow = btn.parents("tr");
			var tmpArr = new Array();
			var i = 0;
			nowRow.find("td").each(function(){
				if($(this).text()!='') {
					tmpArr[i] = $(this).text();
					i++;
				}
			});
			$("form input[name='userName']").val(tmpArr[0]);
			$("form input[name='userPwd']").val(tmpArr[1]);
			if(tmpArr[2]=='男') {
				$("form input[name='userSex'][value='0']").prop("checked",true);
			} else{
				$("form input[name='userSex'][value='1']").prop("checked",true);
			}
			relax=tmpArr[3].split(',');
			for (var j=0; j<relax.length;j++) {
				if(relax[j]=='阅读') {
					$("form input[name='relax'][value='0']").prop("checked",true);
				} 
				if(relax[j]=='游泳') {
					$("form input[name='relax'][value='1']").prop("checked",true);
				} 
				if (relax[j]=='篮球'){
					$("form input[name='relax'][value='2']").prop("checked",true);
				}
			}
			if(tmpArr[4]=='教师'){
				$("#job").find("option[value="+'1'+"]").prop("selected",true);
			} 
			if(tmpArr[4]=='电器工程师'){
				$("#job").find("option[value="+'2'+"]").prop("selected",true);
			}
			if(tmpArr[4]=='财务'){
				$("#job").find("option[value="+'3'+"]").prop("selected",true);
			}
			if(tmpArr[4]=='自由职业'){
				$("#job").find("option[value="+'4'+"]").prop("selected",true);
			}
		};
		function saveUser(){
			if('' != $("form input[name='userName']").val()&&''!= $("form input[name='userPwd']").val()){
				var tmp = new Array();
				var i = 0;
				tmp[0] = $("form input[name='userName']").val();
				tmp[1] = $("form input[name='userPwd']").val();
				if($("form input[name='userSex']:checked").val()==0) {
					tmp[2]='男';
				} else {
					tmp[2]='女';
				}
				tmp[3]='';
				$("form input[name='relax']:checked").each(function(){
					tmp[3]+=$(this).val()+',';
				});
				relax=tmp[3].split(',');
				tmp[3]='';
				for (var j=0; j<relax.length;j++) {
					if(relax[j]!=''){
						if(relax[j]=='0') {
							tmp[3]+='阅读';
						} 
						if(relax[j]=='1') {
							tmp[3]+='游泳';
						} 
						if (relax[j]=='2'){
							tmp[3]+='篮球';
						}
						if(j!=relax.length-2){
							tmp[3]+=',';
						}
					}
				}
				tmp[4] = $("select option:selected").text();
				nowRow.find("td").each(function(){
					$(this).text(tmp[i]);
					i++;	
				});
				alert('保存成功!');
				$("form input[type=reset]").trigger("click");
				} else {
					alert('请输入数据!');
				}
		}
		function addUser(){
			if('' != $("form input[name='userName']").val()&&''!= $("form input[name='userPwd']").val()){
				var tmp = new Array();
				var i = 0;
				tmp[0] = $("form input[name='userName']").val();
				tmp[1] = $("form input[name='userPwd']").val();
				if($("form input[name='userSex']:checked").val()==0) {
					tmp[2]='男';
				} else {
					tmp[2]='女';
				}
				tmp[3]='';
				$("form input[name='relax']:checked").each(function(){
					tmp[3]+=$(this).val()+',';
				});
				relax=tmp[3].split(',');
				tmp[3]='';
				for (var j=0; j<relax.length;j++) {
					if(relax[j]!=''){
						if(relax[j]=='0') {
							tmp[3]+='阅读';
						} 
						if(relax[j]=='1') {
							tmp[3]+='游泳';
						} 
						if (relax[j]=='2'){
							tmp[3]+='篮球';
						}
						if(j!=relax.length-2){
							tmp[3]+=',';
						}
					}
				}
				tmp[4] = $("select option:selected").text();
				$("form input[type=reset]").trigger("click");
				$("#table").append('<tr>'+
    			'<td>'+tmp[0]+'</td>'+
    			'<td>'+tmp[1]+'</td>'+
    			'<td>'+tmp[2]+'</td>'+
    			'<td>'+tmp[3]+'</td>'+
    			'<td>'+tmp[4]+'</td>'+
    			'<td><input type="button" value="修改"/></td>'+
				'</tr>');
				} else {
					alert('请输入数据!');
				}
		}
  </script>	
  </head>
  <body>
     <table border="1" id="table">
     		<tr>
    			<td>用户名</td>
    			<td>密码</td>
    			<td>性别</td>
    			<td>爱好</td>
    			<td>工作</td>
    			<td>操作</td>
    		</tr>
    		<tr>
    			<td>张三</td>
    			<td>123456</td>
    			<td>男</td>
    			<td>阅读,篮球</td>
    			<td>自由职业</td>
    			<td><input type="button" value="修改"/></td>
    		</tr>
    		<tr>
    			<td>李娜</td>
    			<td>111111</td>
    			<td>女</td>
    			<td>游泳</td>
    			<td>财务</td>
    			<td><input type="button" value="修改"/></td>
    		</tr>
    		<tr>
    			<td>李四</td>
    			<td>111564</td>
    			<td>男</td>
    			<td>游泳,篮球</td>
    			<td>教师</td>
    			<td><input type="button" value="修改"/></td>
    		</tr>
     </table>

     <form action="formResult.html" name="userForm" method="get">
    	<table>
    		<tr>
    			<td>用户名：</td>
    			<td><input type="text" name="userName" value=""/></td>
    		</tr>	
    		<tr>
    			<td>密码：</td>
    			<td><input type="password" name="userPwd" value=""/></td>
    		</tr>
    		<tr>
    			<td>性别：</td>
    			<td><input type="radio" name="userSex" value="0" >男 
    				<input type="radio" name="userSex" value="1" >女 </td>
    		</tr>
    		<tr>
    			<td>爱好：</td>
    			<td><input type="checkbox" name="relax" value="0" >阅读
    				<input type="checkbox" name="relax" value="1">游泳
    				<input type="checkbox" name="relax" value="2" >篮球</td>
    		</tr>  
    		<tr>
    			<td>工作：</td>
    			<td><select id="job" >  <!-- size="5" multiple -->
    					<option value="">请选择职业</option>
    					<option value="1">教师</option>
    					<option value="2" >电器工程师</option>
    					<option value="3" >财务</option>
    					<option value="4">自由职业</option>
    			    </select></td>
    		</tr>   
    		<tr>
    			<td colspan="2" align="center"> 
    			<input type="reset" value="清空"/>
    			<input type="button" value="保存"/>
				<input type="button" value="添加" onclick="addUser();"/>
				</td>
    		</tr>
    	</table>
		
    </form>
  </body>
</html>
